{% extends "baseMenuMapa.html" %}

{% block extras %}
<div class="row-fluid pagination-centered">
  {% if error %} <div style="text-align: center;"><font color="red" size=2>Error: {{ error }}</font></div>{% endif %}
  <h4>Predicciones para el viaje desde {{ origen }} a {{ destino}} de la linea {{ linea }}</h4>
  <div id="tableContainer" class="row">
      {% if predicciones %}
      <div class="span4 center">
      <table class="table table-striped">
      	<thead>
			<tr>
				<th>Tiempo estimado [m:ss]</a></th>
			</tr>
		</thead>
		<tbody>
      {% for bus in predicciones %}
        <tr>
        	<td>{{ bus.time }}: {{ bus.timeseg }}</td>
       	</tr>
      {% endfor %}
      </tbody></table>
      {% if timeStamp %}<a><font size=2>Tiempos Calculados a {{ timeStamp }}</font></a>{% endif %}
      </div>
      <div class="span8"><div id="mapas" style="height:350px">Aca va el mapa</div></div>
    {% endif %}
  </div>
  <br>
  <div><form name = "formPrediccion" action="" method="post">{% csrf_token %}
   	<BUTTON class="btn-primary" type="submit" name="action" value="prediction">Volver a elegir</BUTTON>
  </form></div>
</div>
{% endblock %}

{% block marcas %}   
    {% if route %}
    	{% if stopList %}
    		{% for stop in stopList %}
    			{% if origen = stop or destino = stop %}
    			markerPosition = new google.maps.LatLng({{ stop.latitud }},{{ stop.longitud}});
       			marker = new google.maps.Marker({
        			map:map,
        			draggable:false,
        			position: markerPosition,
        			title: "Parada {% if origen = stop %}origen{% else%}destino{% endif %}: {{ stop.calle1 }} {% if stop.calle2 == '' %}& {{ stop.calle2 }} {% endif %} ({{ stop.orden }})",
        			icon: markerImageSelected
    			});
    			markerSelected = marker
    			google.maps.event.addListener(map, 'click', toggleBounce); //Click sobre el marker
    			limits.extend(markerPosition);
    			{% endif %}
    		{% endfor %}		
    	{% endif %} 
    	
    	var flightPlanCoordinates = [
	      {% for stop in stopList %}
		    new google.maps.LatLng({{ stop.latitud }},{{ stop.longitud}}),
	      {% endfor %}
		];
		var flightPath = new google.maps.Polyline({
		    path: flightPlanCoordinates,
		    strokeColor: "#FF0000",
		    strokeOpacity: 1.0,
		    strokeWeight: 2
		});
	
	 	flightPath.setMap(map);
    {% endif %}
    
    /* La lista de posiciones de los colectivos - corregir
    {% if listaUnidades %}
    var point2 = new GLatLng(0,0);
    {% for unidad in listaUnidades %}
	point2 = new GLatLng({{ unidad.latitud }},{{ unidad.longitud}} );
    marcador2 = new GMarker(point2, markerOptions2);
	
    google.maps.Event.addListener(marcador2, 'click', function(overly, latlng, overlaylatlng) { //funcion que muestra la ventana de informacion
        map.openInfoWindowHtml(new GLatLng({{ unidad.latitud }},{{ unidad.longitud}} ), "<div style='font-size: 8pt; font-family: verdana'><p>Linea : {{ parada.linea}} </p><p>Orden: {{ parada.orden }} </p><p>Latitud: {{ unidad.latitud }} </p><p>Longitud:{{ unidad.longitud}} </p></div>"); 
    });
    map.addOverlay(marcador2);   
    
    {% endfor %}
    {% endif %} Para cuando se pase las posiciones de los colectivos
    */
{% endblock %}

{% block extraScripts %}<script>setTimeout('document.location.reload()',60000); </script>{% endblock %}
